<template>
  <div class="right-box">
    <div class="box1">
      <div class="title-box">
        <commonItemTitle title="事前预警"></commonItemTitle>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1">预警名称</div>
          <div class="item2">业务类型</div>
          <div class="item3">进出口</div>
          <div class="item4">数量</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list1"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <div class="list-box">
            <div class="item-box" v-for="item in 4" :key="item">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="Top Center prompts info"
                placement="top"
              >
                <div class="item1"><span class="text">当日人均派单数量</span></div>
              </el-tooltip>

              <div class="item2">单证审核</div>
              <div class="item3">进口</div>
              <div class="item4">
                <div class="value">443</div>
                <img src="@/assets/imgs/icon-danger.png" alt="" />
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
        <div class="list-box" v-else>
          <div class="item-box listItem" v-for="item in 4" :key="item">
            <div class="item1"><span class="text">当日人均派单数量</span></div>
            <div class="item2">单证审核</div>
            <div class="item3">进口</div>
            <div class="item4">
              <div class="value">443</div>
              <img src="@/assets/imgs/icon-danger.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title-box">
        <commonItemTitle title="事中预警"></commonItemTitle>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1">预警名称</div>
          <div class="item2">业务类型</div>
          <div class="item3">进出口</div>
          <div class="item4">业务单号</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list1"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <div class="list-box">
            <div class="item-box" v-for="item in 7" :key="item">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="Top Center prompts info"
                placement="top"
              >
                <div class="item1"><span class="text">当日人均派单数量事实上</span></div>
              </el-tooltip>
              <div class="item2">单证审核</div>
              <div class="item3">进口</div>
              <div class="item4">
                <div class="value">220120251000423712</div>
                <img src="@/assets/imgs/icon-danger.png" alt="" />
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
        <div class="list-box" v-else>
          <div class="item-box" v-for="item in 7" :key="item">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="Top Center prompts info"
              placement="top"
            >
              <div class="item1"><span class="text">当日人均派单数量事实上</span></div>
            </el-tooltip>
            <div class="item2">单证审核</div>
            <div class="item3">进口</div>
            <div class="item4">
              <div class="value">220120251000423712</div>
              <img src="@/assets/imgs/icon-danger.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="title-box">
        <commonItemTitle title="事后预警"></commonItemTitle>
      </div>
      <div class="content-box">
        <div class="head-box">
          <div class="item1">预警名称</div>
          <div class="item2">业务类型</div>
          <div class="item3">进出口</div>
          <div class="item4">业务单号</div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="list1"
          v-if="listScrollOptions.singleHeight > 0"
        >
          <div class="list-box">
            <div class="item-box" v-for="item in 7" :key="item">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="Top Center prompts info"
                placement="top"
              >
                <div class="item1">
                  <span class="text">当日人均派单数量事实上</span>
                </div>
              </el-tooltip>
              <div class="item2">单证审核</div>
              <div class="item3">进口</div>
              <div class="item4">
                <div class="value">220120251000423712</div>
                <!-- <img src="@/assets/imgs/icon-danger.png" alt="" /> -->
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
        <div class="list-box" v-else>
          <div class="item-box" v-for="item in 7" :key="item">
            <div class="item1"><span class="text">当日人均派单数量</span></div>
            <div class="item2">单证审核</div>
            <div class="item3">进口</div>
            <div class="item4">
              <div class="value">220120251000423712</div>
              <img src="@/assets/imgs/icon-danger.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="black-box">三、1-10</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import commonItemTitle from "@/components/commonItemTitle.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const list1 = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
const listScrollOptions = ref({
  singleHeight: 0,
});
const renderScrollFun = () => {
  let ele = document.getElementsByClassName("listItem")[0] as HTMLElement;
  let scroll1 = ele.offsetHeight;
  listScrollOptions.value.singleHeight = scroll1 ? scroll1 : 0;
};
const resizeRender = () => {
  listScrollOptions.value.singleHeight = 0;
  setTimeout(() => {
    renderScrollFun();
  }, 2000);
};
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      renderScrollFun();
    }, 2000);
  });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.right-box {
  position: relative;
}
.box1,
.box2,
.box3 {
  display: flex;
  flex-direction: column;
  // align-items: end;
  padding-top: 6px;
  box-sizing: border-box;
  .title-box {
  }
  .content-box {
    width: 402px;
    position: relative;
    margin: -2px 0 0 8px;
    color: #fff;
    background: linear-gradient(
      180deg,
      rgba(1, 50, 117, 1) 0%,
      rgba(8, 43, 121, 1) 100%
    );
    .head-box,
    .list-box {
      .item1,
      .item2,
      .item3,
      .item4 {
        display: flex;
        align-items: center;
        min-width: 0;
        font-size: 13px;
        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .item1 {
        flex: 4;
        padding: 0 6px 0 12px;
        box-sizing: border-box;
      }
      .item2 {
        flex: 2;
        padding: 0 5px;
        box-sizing: border-box;
      }
      .item3 {
        flex: 2;
      }
      .item4 {
        flex: 2;
      }
    }
    .head-box {
      display: flex;
      height: 36px;
      color: #45e3ff;
      background: linear-gradient(
        180deg,
        rgba(20, 140, 242, 0.8) 0%,
        rgba(25, 71, 157, 0.8) 100%
      );
      border-radius: 0px 0px 0px 0px;
      // opacity: 0.8;
    }
    .list-box {
      .item-box {
        height: 36px;
        display: flex;
        color: #4ac5fe;
        // background: rgba(3, 47, 97, 1);

        .item4 {
          display: flex;
          .value {
          }
          img {
            width: 12px;
            height: 12px;
            margin-left: 8px;
          }
        }
      }
      .item-box:nth-of-type(2n) {
        // background: rgba(8, 49, 131, 1);
        background: linear-gradient(
          180deg,
          rgba(20, 140, 242, 0.2) 0%,
          rgba(25, 71, 157, 0.2) 100%
        );
      }
    }
  }
}
.box1 {
  .scroll-wrap {
    height: 144px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
.box2,
.box3 {
  margin: 15px 0;
  .head-box {
    background: linear-gradient(
      180deg,
      rgba(91, 97, 232, 0.8) 0%,
      rgba(62, 47, 173, 0.8) 100%
    ) !important;
  }
  .content-box {
    background: linear-gradient(
      180deg,
      rgba(18, 22, 137, 1) 0%,
      rgba(45, 33, 136, 1) 100%
    ) !important;
  }
  .list-box {
    .item-box:nth-of-type(2n) {
      background: linear-gradient(
        180deg,
        rgba(91, 97, 232, 0.2) 0%,
        rgba(62, 47, 173, 0.2) 100%
      ) !important;
    }
  }
  .item1 {
    flex: 4 !important;
    min-width: 0 !important;
  }
  .item2 {
    flex: 3 !important;
  }
  .item3 {
    flex: 2 !important;
  }
  .item4 {
    flex: 7 !important;
  }
}
.box3 {
  margin: 15px 0;
  .head-box {
    background: linear-gradient(
      180deg,
      rgba(20, 140, 242, 0.8) 0%,
      rgba(25, 71, 157, 0.8) 100%
    ) !important;
  }
  .content-box {
    background: linear-gradient(
      180deg,
      rgba(1, 50, 117, 1) 0%,
      rgba(8, 43, 121, 1) 100%
    ) !important;
  }
  .list-box {
    .item-box:nth-of-type(2n) {
      background: linear-gradient(
        180deg,
        rgba(20, 140, 242, 0.2) 0%,
        rgba(25, 71, 157, 0.2) 100%
      ) !important;
    }
  }
}
.black-box {
  position: absolute;
  right: 0px;
  bottom: -24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 30px;
  background: #000000;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 13px;
  color: #76eaff;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.5;
}
.scroll-wrap {
  height: 252px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
</style>
